import React, { Component } from 'react'

import TriggerGetData from '../../common/trigger'

class DropDownItem extends Component {
    render() {
        const { index, data, active, callback } = this.props;

        return (
            <div>1111</div>
            // <li className={active ? 'active' : null} onClick={() => callback(index)}><a href="javascript:void(0)">{data.icon ? <i className={data.icon} style={{ width: '1.1em' }}></i> : null}{data.name}</a></li>
        )
    }
}

export default class ReactDropDown extends Component {
    constructor() {
        super();

        this.state = {
            width: 0,
            left: 0,
            right: 0,
            top: 0,
            bottom: 'auto',
            trigger: false
        }
    }
    shouldComponentUpdate(nextProps, nextState) {
        for (var i in this.state) {
            if (this.state[i] !== nextState[i]) {
                return true
            }
        }
        return false
    }
    componentDidMount() {
        this.setState({
            trigger: true
        })
    }
    componentDidUpdate() {
        const { target, data } = this.props;
        const pos = target.getBoundingClientRect() || {};
        const height = Math.max(document.body.clientHeight, window.innerHeight);
        const width = document.body.clientWidth;

        this.setState({
            width: pos.width,
            left: pos.left,
            right: (width - pos.right),
            top: pos.height + pos.top,
            bottom: ((pos.height + pos.top + data.length * 32) > height ? 10 : 'auto')
        })
    }
    render() {
        const { width, left, right, top, bottom } = this.state;
        const { data, selected, callback, dir } = this.props;

        let style = { display: 'block', left: left, top: top, bottom: bottom };

        if (dir != 'left') {
            style.left = 'auto';
            style.right = right
        }

        return (
            <ul className="dropdown-menu" style={style}>
                {data.map((i, index) => <DropDownItem key={index} index={index} data={i} active={selected == index} callback={callback || function () { }} />)}
            </ul>
        )
    }
}

export class ReactDropDownFull extends TriggerGetData {
    constructor() {
        super();
        this.state = {
            isOpen: false
        }
    }
    trigger() {
        this.setState({
            isOpen: !this.state.isOpen
        })
    }
    close() {
        this.setState({
            isOpen: false
        })
    }
}

export class DropDownLevel extends Component {
    constructor() {
        super()
        this.state = {
            wwidth: 0,
            left: 0,
            right: 0,
            top: 0,
            bottom: 'auto',
            showMenuItem: -1,
            showSubMenuItem: -1,
            subMenuList: []
        }
    }
    componentDidMount() {
        const { target } = this.props;
        const pos = target.getBoundingClientRect() || {};
        const height = Math.max(document.body.clientHeight, window.innerHeight);
        const width = document.body.clientWidth;

        this.setState({
            width: pos.width,
            left: pos.left,
            right: (width - pos.right),
            top: pos.height + pos.top,
            bottom: ((pos.height + pos.top + 64) > height ? 10 : 'auto')
        })
    }

    // menuHover(index) {
    //     const { data } = this.props;
    //     this.setState({
    //         showMenuItem: index,
    //         subMenuList: data[index].sub || []
    //     })
    // }

    menuLeave() {
        this.setState({
            showMenuItem: -1,
            showSubMenuItem: -1
        })
        this.props.trigger();

    }

    subMenuHover(subIndex) {
        this.setState({
            showSubMenuItem: subIndex
        })
    }

    subMenuLeave() {
        this.setState({ showSubMenuItem: -1 })
    }
    preventEvent(e) {
        e.stopPropagation();
    }
    render() {
        const { width, left, right, top, bottom, subMenuList } = this.state;
        const { callback, data } = this.props;
        let style = { display: 'block', left: left, top: top, bottom: bottom };
        // let onMouseOver = this.menuHover.bind(this),
        let onMouseLeave = this.menuLeave.bind(this),
            showMenuItem = this.state.showMenuItem,
            subMenuHover = this.subMenuHover.bind(this),
            subMenuLeave = this.subMenuLeave.bind(this),
            showSubMenuItem = this.state.showSubMenuItem,
            preventEvent = this.preventEvent.bind(this);
        return <div >
            <ul id="menuOptionContainer" className="dropdown-menu" style={style} onClick={(e) => { preventEvent(e) }}>
                {
                    data.map(function (item, index) {
                        return <li key={index}
                            className={(showMenuItem == item.menuId) ? 'active' : null}
                            onClick={(!item.sub) ? () => callback(item.menuId) : null}>
                            <a href="javascript:void(0)">
                                <i className={item.icon} style={{ width: '1.1em' }}></i>
                                {item.name}
                                {item.sub ? <i className="fa fa-angle-right" style={{ width: '1.1em' }}></i> : ""}
                            </a>
                        </li>
                    })
                }
            </ul>
            {
                subMenuList.length ? <SubMenu subMenuHover={subMenuHover}
                    style={style}
                    subMenuLeave={subMenuLeave}
                    onMouseLeave={onMouseLeave}
                    showSubMenuItem={showSubMenuItem}
                    callback={callback}
                    subMenuList={subMenuList} /> : null
            }
        </div>
    }
}
class SubMenu extends Component {
    render() {
        const { style, subMenuList, showSubMenuItem, subMenuHover, subMenuLeave, onMouseLeave, callback } = this.props;
        let curStyle = style;
        let addLeft = document.getElementById('menuOptionContainer') ? document.getElementById('menuOptionContainer').clientWidth : 150;
        curStyle.left = curStyle.left + addLeft;

        return <div onClick={onMouseLeave} onMouseLeave={subMenuLeave}>
            <ul className="dropdown-menu" style={curStyle}>
                {
                    subMenuList.map(function (item, index) {
                        return <li key={index} onClick={() => callback(item.menuId)} onMouseOver={() => { subMenuHover(item.type) }}
                            className={(showSubMenuItem == item.type) ? 'active' : null} >
                            <a href="javascript:void(0)">
                                <i className={item.icon} style={{ width: '1.1em' }}></i>
                                {item.name}
                            </a>
                        </li>
                    })
                }
            </ul>
        </div>
    }
}

export class DropDownMultiLevel extends Component {
        constructor() {
        super();

        this.state = {
            width: 0,
            left: 0,
            right: 0,
            top: 0,
            bottom: 'auto',
            trigger: false
        }
    }
    shouldComponentUpdate(nextProps, nextState) {
        for (var i in this.state) {
            if (this.state[i] !== nextState[i]) {
                return true
            }
        }
        return false
    }
    componentDidMount() {
        this.setState({
            trigger: true
        })
    }
    componentDidUpdate() {
        const { target, data } = this.props;
        const pos = target.getBoundingClientRect() || {};
        const height = Math.max(document.body.clientHeight, window.innerHeight);
        const width = document.body.clientWidth;

        this.setState({
            width: pos.width,
            left: pos.left,
            right: (width - pos.right),
            top: pos.height + pos.top,
            bottom: ((pos.height + pos.top + data.length * 32) > height ? 10 : 'auto')
        })
    }
    render() {
        const { width, left, right, top, bottom } = this.state;
        const { data, selected, callback, dir } = this.props;

        let style = { display: 'block', left: left, top: top, bottom: bottom };

        if (dir != 'left') {
            style.left = 'auto';
            style.right = right
        }

        return (
            <ul id="menuOptionContainer" className="dropdown-menu" style={style} onClick={(e) => { preventEvent(e) }}>
                {
                    data.map(function (item, index) {
                        return <li key={index}
                            onMouseOver={() => { onMouseOver(item.menuId) }}
                            className={(showMenuItem == item.menuId) ? 'active ' : null}
                            onClick={(!item.sub) ? () => callback(item.menuId) : null}>
                            <a href="javascript:void(0)">
                                <i className={item.icon} style={{ width: '1.1em' }}></i>
                                {item.name}
                                {item.sub ? <i className="fa fa-angle-right" style={{ width: '1.1em' }}></i> : ""}
                            </a>
                            {
                                item.sub ? <ul>
                                    {
                                        item.sub.map(function (item, index) {
                                            return <li key={index} onClick={() => callback(item.menuId)} onMouseOver={() => { subMenuHover(item.type) }}
                                                className={(showSubMenuItem == item.type) ? 'active' : null} >
                                                <a href="javascript:void(0)">
                                                    <i className={item.icon} style={{ width: '1.1em' }}></i>
                                                    {item.name}
                                                </a>
                                            </li>
                                        })
                                    }
                                </ul> : null
                            }
                        </li>
                    })
                }
            </ul>
        )
    }
    render() {
        const { width, left, right, top, bottom, subMenuList } = this.state;
        const { callback, data } = this.props;
        let style = { display: 'block', left: left, top: top, bottom: bottom };
        let onMouseOver = this.menuHover.bind(this),
            onMouseLeave = this.menuLeave.bind(this),
            showMenuItem = this.state.showMenuItem,
            subMenuHover = this.subMenuHover.bind(this),
            subMenuLeave = this.subMenuLeave.bind(this),
            showSubMenuItem = this.state.showSubMenuItem,
            preventEvent = this.preventEvent.bind(this);
        return <div >
            
        </div>
    }
}